<template>
  <div class="content" v-loading="loading">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <el-tabs
      v-model="activeName"
      @tab-click="handleTabClick"
      :before-leave="beforeLeave"
    >
      <el-tab-pane label="基础信息" name="basic">
        <el-scrollbar>
          <Basic
            :isSaveClick="isSaveClick"
            :detailInfo="projectDetail"
            :projectStatus="projectStatus"
            :isView="isView"
            :isCheck="isCheck"
            :bpmStatus="bpmStatus"
            @changeJszq="changeJszq"
            @setProjectInfo="setProjectInfo"
          />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="年度目标计划" name="annual">
        <el-scrollbar>
          <Annual
            :yearList="yearList"
            :isSaveClick="isSaveClick"
            :detailInfo="ndmbjhDetail"
            :projectStatus="projectStatus"
            :isView="isView"
            :bpmStatus="bpmStatus"
            @setNdmbjhList="setNdmbjhList"
          />
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="月度完成计划" name="month">
        <el-scrollbar>
          <Monthly
            :timeList="timeList"
            :isSaveClick="isSaveClick"
            :detailInfo="ydwcqkVoDetail"
            :outEffectPicList="outEffectPicList"
            :projectStatus="projectStatus"
            :bpmStatus="bpmStatus"
            :isView="isView"
            @setYdwcqkVoList="setYdwcqkVoList"
          />
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
    <!-- <div class="line"></div> -->
    <div class="buttons">
      <div class="info">
        <el-button
          size="small"
          :disabled="!pkid"
          @click="viewEidtHistory"
          class="check"
          >修改记录</el-button
        >
        <el-button
          size="small"
          :disabled="!checkList.length"
          @click="viewCheckInfo"
          class="check"
          >审核记录</el-button
        >

        <div v-if="newCheckInfo.pkid" class="check-result">
          <span
            >审核时间: {{ newCheckInfo.examineTime }}</span
          >
          <span class="divide-line"></span>
          <span
            >审核结果:
            <span
              :style="{
                color:
                  newCheckInfo.bpmStatus === '3'
                    ? '#00CA6D'
                    : '#F9801C'
              }"
              >{{
                newCheckInfo.bpmStatus === '3'
                  ? '通过'
                  : '退回'
              }}</span
            ></span
          >
          <div class="divide-line"></div>
          <span>审核意见: {{ newCheckInfo.opinion }}</span>
        </div>
      </div>

      <div class="save-button">
        <el-button
          size="small"
          @click="checkProject"
          class="check"
          v-if="projectStatus === '2'"
          v-has="'messageManagement:check'"
          >审核</el-button
        >
        <el-button
          size="small"
          @click="saveInfo('save')"
          v-if="projectStatus !== '2' && !isView"
          class="save"
          :loading="btnLoading"
          >保存</el-button
        >
        <el-button
          size="small"
          @click="saveInfo('submit')"
          v-if="projectStatus !== '2' && !isView"
          class="submit"
          :loading="btnLoading"
          >提交</el-button
        >
      </div>
    </div>

    <customizeDialog
      :visible.sync="dialogCheckVisible"
      @close="onClose"
      :title="headerTitle"
      width="500px"
      top="40px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="form"
        :model="checkForm"
        :rules="checkRules"
        label-width="80px"
      >
        <el-form-item label="审核结果" prop="result">
          <el-radio-group v-model="checkForm.result">
            <el-radio label="1">通过</el-radio>
            <el-radio label="0">退回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            type="textarea"
            v-model="checkForm.advice"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onCheck"
          >确定</el-button
        >
      </template>
    </customizeDialog>

    <!-- <el-dialog
      :visible.sync="dialogCheckInfoVisible"
      :title="headerTitle"
      width="600px"
      top="40px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="check-text">
        共计审核
        <span class="check-text-count">{{
          checkList.length
        }}</span>
        次
      </div>
      <div class="behavior">
        <el-scrollbar>
          <div
            v-for="(item, index) in checkList"
            :key="index"
            class="behavior-item"
          >
            <div class="behavior-item-time">
              {{ item.examineTime }}
            </div>
            <div class="line">
              <div
                class="behavior-item-line"
                v-if="index !== 0"
              ></div>
              <div class="behavior-item-circle"></div>
            </div>

            <div>
              <div class="behavior-item-result">
                审核结果:
                <span
                  :style="{
                    color:
                      item.bpmStatus === '3'
                        ? '#00CA6D'
                        : '#F9801C'
                  }"
                >
                  {{
                    item.bpmStatus === '3' ? '通过' : '退回'
                  }}
                </span>
              </div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="item.opinion"
                placement="top"
              >
                <div class="behavior-item-advice">
                  审核意见: {{ item.opinion }}
                </div>
              </el-tooltip>
              <div class="behavior-item-user">
                审核人员：{{ item.examineUser }}
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-dialog> -->

    <shenheHistory
      ref="checkDialog"
      :data="checkList"
      :passKey="3"
      status="bpmStatus"
    >
    </shenheHistory>

    <!-- 修改记录弹窗 -->
    <viewEidtHistory :pkid="pkid" ref="viewHistoryRef" />
  </div>
</template>

<script>
import Basic from './basicInfo.vue'
import Annual from './annualPlan.vue'
import Monthly from './monthlyCompletion.vue'
import {
  addProjectInfo,
  queryProjectDetail,
  queryCheckInfo,
  addCheckInfo
} from '@/api/projectMessage'
import { isAdmin, isEnterprise } from '@/utils/permission'
import { noticeFileUpload } from '@/api/wisdomBuild'
import cacheUtil from '@/utils/cache'
import { companyOptions } from '@/utils/project/data'
import Breadcrumb from '@/components/breadcrumb'
import shenheHistory from '@/components/checkHistory/shenheHistory.vue'
import customizeDialog from '@/components/checkHistory/customizeDialog.vue'
import viewEidtHistory from './editHistoryDialog'

export default {
  props: {
    pkid: String,
    isView: Boolean,
    isCheck: Boolean,
    title: String
  },
  data() {
    return {
      activeName: 'basic',
      yearList: [],
      timeList: [],
      isTabClick: true,
      isSaveClick: false,
      projectInfo: {},
      ndmbjhList: [],
      ydwcqkVoList: [],
      projectDetail: {},
      outEffectPicList: [],
      ndmbjhDetail: [],
      ydwcqkVoDetail: [],
      projectStatus: '0', // 项目状态
      bpmStatus: '0', // 流程状态
      isSubmit: false, // 是否提交
      dialogCheckVisible: false,
      headerTitle: '',
      checkForm: {
        result: '',
        advice: ''
      },
      fileList: [],
      imageList: [],
      countFileAdd: 0, // 上传成功的文件数
      countImageAdd: 0, // 上传成功的图片数
      loading: false,
      checkList: [], // 审核记录
      dialogCheckInfoVisible: false,
      checkRules: {
        result: [
          {
            required: true,
            message: '请选择审核结果',
            trigger: 'blur'
          }
        ]
      },
      projectId: '',
      isBasicSubmit: false, // 基本信息的表单是否校验通过
      isNdSubmit: false, // 年度目标计划的表单是否校验通过
      isYdSubmit: false, // 月度完成计划的表单是否校验通过
      newCheckInfo: {},

      btnLoading: false
    }
  },
  components: {
    Basic,
    Annual,
    Monthly,
    Breadcrumb,
    shenheHistory,
    customizeDialog,
    viewEidtHistory
  },
  computed: {
    isAdmin() {
      return isAdmin()
    },
    isEnterprise() {
      return isEnterprise()
    },
    titles() {
      return [this.title]
    }
  },

  mounted() {
    // if (this.isCheck) {
    //   this.checkProject()
    // }

    const pkid = this.pkid
    if (pkid) {
      this.projectId = pkid
      this.getProjectDetail(pkid)
      this.getCheckInfo(pkid)
    }
  },
  methods: {
    handleTabClick(tab) {
      this.activeName = tab._props.name
    },

    // 查询审核记录
    getCheckInfo(pkid) {
      queryCheckInfo(pkid).then((res) => {
        if (res.success) {
          this.checkList = res.data.map((item) => {
            return {
              ...item,
              checkOpinion: item.opinion,
              checkUserName: item.examineUser,
              checkTime: item.examineTime
            }
          })
          if (this.checkList.length) {
            this.newCheckInfo = res.data[0]
          }
        }
      })
    },

    // 建设周期
    changeJszq(time) {
      if (time) {
        this.isTabClick = false
        const startYear = Number(time[0].split('-')[0])
        const endYear = Number(time[1].split('-')[0])
        const startMonth = Number(time[0].split('-')[1])
        const endMonth = Number(time[1].split('-')[1])
        this.yearList = []

        // 建设周期对应年份
        for (let i = startYear; i < endYear + 1; i++) {
          this.yearList.push(i)
        }

        // 建设周期对应月份
        if (startYear === endYear) {
          this.timeList = [
            {
              year: startYear,
              month: this.getMonths(startMonth, endMonth)
            }
          ]
        } else {
          this.timeList = this.yearList.map((item) => {
            return {
              year: item,
              month:
                item === startYear
                  ? this.getMonths(startMonth, 12)
                  : item === endYear
                  ? this.getMonths(1, endMonth)
                  : this.getAllMonths()
            }
          })
        }
      } else {
        this.isTabClick = true
        // this.$message.warning('请先选择建设周期')
      }
    },

    // 获取月份
    getMonths(start, end) {
      const result = []
      for (let i = start; i < end + 1; i++) {
        result.push(i)
      }
      return result
    },

    // 获取一年所有月份
    getAllMonths() {
      const result = []
      for (let i = 0; i < 12; i++) {
        result.push(i + 1)
      }
      return result
    },

    // 基本信息
    setProjectInfo(info, fileList, tag) {
      this.projectInfo = info
      // const jszq = info.jszqArr
      //   ? JSON.stringify(info.jszqArr)
      //   : ''
      // info.jszq = JSON.parse(JSON.stringify(jszq))
      this.fileList = fileList
      this.isBasicSubmit = tag

      if (!tag) {
        this.$message.warning('请保持基础信息填写格式正确')
      }
    },

    // 年度计划
    setNdmbjhList(info, tag) {
      this.ndmbjhList = info
      this.isNdSubmit = tag
      if (!tag) {
        this.$message.warning(
          '请保持年度目标计划填写格式正确'
        )
      }
    },

    // 月度计划
    setYdwcqkVoList(info, tag) {
      const infoObj = JSON.parse(JSON.stringify(info))
      this.ydwcqkVoList = []
      infoObj.map((item) => {
        item.month.map((i) => {
          let planPicRelList = []
          i.effectPicList.forEach((element) => {
            planPicRelList = planPicRelList.concat(
              element.planPictureRelList
            )
          })
          i.planPicRelList = planPicRelList
          delete i.effectPicList
          this.ydwcqkVoList.push(i)
        })
      })
      this.isYdSubmit = tag
      if (!tag) {
        this.$message.warning(
          '请保持月度目标计划填写格式正确'
        )
        return
      }
      if (
        this.isBasicSubmit &&
        this.isNdSubmit &&
        this.isYdSubmit
      ) {
        this.submitInfo()
      }
    },

    // 点击保存
    saveInfo(tag) {
      this.isSaveClick = !this.isSaveClick
      tag === 'save'
        ? (this.isSubmit = false)
        : (this.isSubmit = true)
    },

    // 保存项目信息
    submitInfo() {
      this.loading = true
      const checkResult = this.checkForm.result

      if (!checkResult) {
        // 管理员保存项目状态为0, 第一次提交为1, 第二次提交为2, 有审核记录之后，保存为1，提交为2
        if (this.isAdmin) {
          // this.isSubmit
          //   ? this.projectDetail.bpmStatus === '1' ||
          //     this.projectDetail.bpmStatus === '3' ||
          //     this.projectDetail.bpmStatus === '4'
          //     ? (this.projectInfo.bpmStatus = '2')
          //     : (this.projectInfo.bpmStatus = '1')
          //   : (!this.checkList.length &&
          //       this.projectDetail.bpmStatus === '0') ||
          //     !this.projectId
          //   ? (this.projectInfo.bpmStatus = '0')
          //   : (this.projectInfo.bpmStatus = '1')

          // 提交
          if (this.isSubmit) {
            // 项目状态为：待提交、审核退回、审核通过 => 状态变为：待审核
            // 项目状态为：未入库 => 待提交
            if (
              this.projectDetail.bpmStatus === '1' ||
              this.projectDetail.bpmStatus === '3' ||
              this.projectDetail.bpmStatus === '4'
            ) {
              this.projectInfo.bpmStatus = '2'
            } else {
              this.projectInfo.bpmStatus = '1'
            }
          } else {
            // 保存
            // 没有审核记录 && 项目状态为未入库 || 新增 => 未入库
            // 项目状态为审核通过 => 审核通过
            // 其他 => 待提交
            if (
              (!this.checkList.length &&
                this.projectDetail.bpmStatus === '0') ||
              !this.projectId
            ) {
              this.projectInfo.bpmStatus = '0'
            } else if (
              this.projectDetail.bpmStatus === '3'
            ) {
              this.projectInfo.bpmStatus = '3'
            } else {
              this.projectInfo.bpmStatus = '1'
            }
          }
        }

        // 企业用户保存项目状态为1, 提交为2
        if (this.isEnterprise) {
          this.isSubmit
            ? (this.projectInfo.bpmStatus = '2')
            : (this.projectInfo.bpmStatus = '1')
        }
      } else {
        checkResult === '1'
          ? (this.projectInfo.bpmStatus = '3')
          : (this.projectInfo.bpmStatus = '4')
      }
      const effectPicList = this.projectInfo.effectPicList
      const sectionInfoList =
        this.projectInfo.sectionInfoList

      const data = {
        project: this.projectInfo,
        ndmbjhList: this.ndmbjhList,
        ydwcqkVoList: this.ydwcqkVoList,
        effectPicList: effectPicList,
        sectionInfoList: sectionInfoList
      }
      // return;
      addProjectInfo(data)
        .then((res) => {
          this.loading = false
          if (res.success) {
            if (!checkResult) {
              this.isSubmit
                ? this.$message.success('提交成功')
                : this.$message.success('保存成功')
            } else {
              this.$message.success('审核成功')
            }

            this.$emit('handleSuccessAdd')

            // 审核提交需要跳转
            if (
              this.isSubmit ||
              checkResult ||
              !this.projectId
            ) {
              this.$router.push({
                path: '/wisdomConstruction/messageManagement/list',
                query: { refresh: Date.now() }
              })
            } else {
              if (this.projectId) {
                this.getProjectDetail(this.projectId)
              }
            }
          } else {
            this.$message.error(res.message || '保存失败')
          }
        })
        .catch(() => {
          this.loading = false
        })
    },

    getProjectDetail(pkid) {
      this.loading = true
      queryProjectDetail(pkid)
        .then((res) => {
          if (res.success) {
            const jszq = res.data.project.jszq
            const project = res.data.project
            this.projectStatus = res.data.project.bpmStatus
            this.bpmStatus = res.data.project.bpmStatus
            project.effectPicList =
              res.data.outEffectPicList
            project.sectionInfoList =
              res.data.sectionInfoList
            this.outEffectPicList =
              res.data.outEffectPicList
            this.projectDetail = project

            this.ndmbjhDetail = res.data.ndmbjhList
            const ydArr = Object.values(
              res.data.ydwcqkVoList.reduce((res, item) => {
                res[item.ydwcqk.year]
                  ? res[item.ydwcqk.year].push(item)
                  : (res[item.ydwcqk.year] = [item])
                return res
              }, {})
            )
            this.ydwcqkVoDetail = ydArr.map((item) => {
              return {
                month: item.sort(
                  (a, b) => a.ydwcqk.month - b.ydwcqk.month
                )
              }
            })

            if (jszq) {
              this.isTabClick = false
              this.changeJszq(JSON.parse(jszq))
            }
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    // 项目审核
    checkProject() {
      this.headerTitle = '审核'
      this.dialogCheckVisible = true
    },

    // 审查
    onCheck() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.addCheck()
        } else {
          return false
        }
      })
    },

    addCheck() {
      const params = {
        projectId: this.projectId,
        bpmStatus:
          this.checkForm.result === '1' ? '3' : '4',
        opinion: this.checkForm.advice,
        examineUser: cacheUtil.getItem('userName')
      }
      // return
      addCheckInfo(params).then((res) => {
        if (res.success) {
          this.saveInfo()
        }
      })
    },

    // 查看审核记录
    viewCheckInfo() {
      this.headerTitle = '审核记录'
      this.$nextTick(() => {
        this.$refs.checkDialog.openDialog()
      })
    },

    onClose() {
      this.checkForm.result = ''
      this.checkForm.advice = ''
      this.dialogCheckVisible = false
    },

    // 选择建设周期才能点击
    beforeLeave(newIndex, oldIndex) {
      if (this.isTabClick) {
        this.$message.warning('请先选择建设周期')
        return false
      }
    },

    // 修改记录
    viewEidtHistory() {
      this.$refs.viewHistoryRef.showDialog()
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
::v-deep {
  .el-tabs {
    padding: 0 30px;
    height: 100%;
    overflow: hidden;
  }
  .el-tabs__content {
    overflow-y: auto;
  }
  .el-tabs__content::-webkit-scrollbar {
    width: 0 !important;
  }
  .el-tabs__item {
    padding: 0 30px;
    font-size: 14px;
    font-weight: bold;
  }
  .el-tabs__item.is-active {
    font-weight: bold;
    color: #282938;

    background: #497fa3;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .el-tabs__item:hover {
    font-weight: bold;
    color: #282938;

    background: #497fa3;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .el-tabs__active-bar {
    background: #497fa3;
    height: 3px;
    border-radius: 2px;
    // width: 26px !important;
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #f1f1f1;
    bottom: 1px;
  }
  .el-tab-pane {
    height: calc(100vh - 260px);
  }

  .el-input__inner {
    // background: #f6f9fc !important;
    color: #4c565c !important;
    height: 32px !important;
    // width: 320px !important;
    // margin-left: 10px;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 40px !important;
      margin-top: -25px !important;
    }

    .el-range-separator {
      width: 20px !important;
      margin-top: -5px !important;
    }

    .el-range-input {
      // background: #f6f9fc !important;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background: #e8eff7 !important;
  }

  .el-button.is-disabled {
    background: #c0c4cc !important;
    border-color: #c0c4cc !important;
  }

  .el-input-group__append {
    position: absolute;
    height: 20px;
    line-height: 20px;
    width: 80px;
    text-align: right;
    top: 4px;
    left: 235px;
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }

  .el-input__suffix {
    top: 1px !important;
    right: 8px !important;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 30px;
    }
    .is-reverse {
      line-height: 15px !important;
    }
  }

  .el-select {
    width: 320px !important;

    .el-input__inner {
      width: 320px !important;
      // margin-left: 10px;
    }

    .el-input__suffix {
      // top: 4px !important;
      .el-input__icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        line-height: 15px;
      }
      .is-reverse {
        line-height: 35px !important;
      }
    }

    .is-focus {
      .el-input__suffix {
        top: -3px !important;
      }
    }
  }

  .el-textarea__inner {
    // width: 320px !important;
    // background: #f6f9fc !important;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
  }

  .el-breadcrumb__inner {
    color: #606266 !important;
    font-weight: 400 !important;
  }
}

.line {
  width: 100%;
  height: 1px;
  margin-top: 10px;
  background: #f1f1f1;
}

.buttons {
  height: 78px;
  display: flex;
  padding: 0 30px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f1f1;

  .info {
    display: flex;
  }

  .check-result {
    margin-left: 30px;
    font-size: 14px;
    display: flex;
    align-items: center;

    .divide-line {
      margin: 0 20px;
      width: 1px;
      height: 12px;
      background: #d0d8e1;
      border-radius: 1px;
    }
  }

  .check {
    width: 90px;
    height: 34px;
    color: white;
    background: #497fa3;
    border: 1px solid #497fa3;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
  }

  .submit {
    width: 104px;
    height: 34px;
    color: white;
    background: #497fa3;
    border: 1px solid #497fa3;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
  }

  .save {
    width: 104px;
    height: 34px;
    border: 1px solid #497fa3;
    border-radius: 2px;
    font-size: 14px;
  }

  .save-button {
    display: flex;
    font-size: 14px;
  }
}

.check-text {
  font-size: 14px;

  &-count {
    color: #00baff;
  }
}

.behavior {
  border-top: 1px solid #eeeff5;
  // border-bottom: 1px solid #eeeff5;
  padding: 20px 0px;
  max-height: 550px;
  overflow: scroll;
  font-size: 14px;

  &-item {
    display: flex;
    // align-items: center;
    font-size: 14px;
    font-family: PingFang SC;
    margin-left: 30px;
    margin-bottom: 10px;

    .line {
      width: 9px;
      text-align: center;
      margin-right: 30px;
    }

    &-circle {
      margin-right: 24px !important;
      width: 10px;
      height: 10px;
      background: #ebf1f8;
      border-radius: 50%;
      // margin-top: -5px;
    }

    &-line {
      width: 1px;
      margin-left: 4px !important;
      margin-top: -70px !important;
      height: 70px;
      background: #e1e9f4;
    }

    &-time {
      font-weight: 500;
      padding-right: 20px;
      width: 200px;
      color: #010101;
    }

    &-result,
    &-advice,
    &-user {
      font-weight: 500;
      padding-right: 20px;
      width: 300px;
      color: #010101;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
    }

    &-advice,
    &-user {
      font-size: 14px;
      font-weight: 400;
      color: #4c565c;
      margin-top: 5px;
    }

    // &-behavior {
    //   font-weight: 400;
    //   color: #505967;
    //   height: 50px;
    //   padding-left: 20px;
    //   width: 75%;
    //   line-height: 50px;
    // }
  }
}
.sh-btn {
  border-top: 1px solid #f1f1f1;
  display: flex;
  height: 70px;
  align-items: center;
}
// ::v-deep .el-dialog {
//   .el-dialog__header {
//     background: #597182 !important;
//     padding: 8px 0 14px 24px !important;
//     height: 39px !important;
//     .el-dialog__title {
//       font-size: 16px !important;
//       line-height: 22px;
//       font-weight: 400 !important;
//       color: white !important;
//       //margin:19px 0 14px 24px !important;
//     }
//     .el-dialog__headerbtn {
//       font-size: 16px;
//       top: 10px !important;
//       right: 17px !important;
//       color: white !important;
//       .el-dialog__close {
//         color: white !important;
//       }
//     }
//   }
//   .el-dialog__body {
//     padding: 17px 32px 18px 26px !important;
//     .el-form-item {
//       margin-bottom: 19px !important;
//     }
//   }
//   .el-input__inner {
//     height: 34px !important;
//     background-color: #f6f9fc !important;
//   }
//   .el-button--default {
//     border-color: #497fa3 !important;
//     span {
//       color: #497fa3 !important;
//     }
//   }
//   .el-button--primary {
//     background: #497fa3 !important;
//     border-color: white !important;
//   }

//   max-height: 600px;
// }
</style>
